import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Platform,
  Image,
  Dimensions,
  ConsoleModule,
  Modal,
  TextInput,
} from '@hippy/react';

import IconChipai from '../../assets/chibaijigou.png'
import IconZichan from '../../assets/zichanguimo.png'
import IconKehu from '../../assets/kehuxinlai.png'
import IconArrow from '../../assets/arrowRight.png'

import { ToastModule } from '../../module/ToastMsg';

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
  },
  infoBg: {
    marginTop: 30,
    marginLeft: 15,
    marginRight: 15,
    flexDirection: 'row',
    justifyContent: "space-between",
    alignItems: 'center',
  },
  itemLine: {
    width: 1,
    height: 50,
    backgroundColor: '#eeeeee',
  },
  infoItem: {
    alignItems: 'center'
  },
  infoItemTitleBg: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  infoItemImg: {
    width: 20,
    height: 20,
  },
  infoItemTitle: {
    marginLeft: 2,
    color: '#8a8a8a',
    fontWeight: 'bold',
    fontSize: 15
  },
  infoItemSubTitle: {
    marginTop: 4,
    color: '#aaaaaa',
  },
  btnBg: {
    marginTop: 18,
    marginBottom: 60,
    backgroundColor: 'res',
    alignItems: 'center',
  },
  btn: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: 200,
    height: 34,
    borderRadius: 17,
    borderWidth: 1,
    borderColor: '#aaaaaa',
  },
  btnText: {
    color: '#aaaaaa',
    fontSize: 16,
  },
  btnImage: {
    marginLeft: 2,
    width: 15,
    height: 24,
  },
});

export default class HomeBottom extends Component {
  constructor(props) {
    super(props);

  }

  _moreInfoDidTapped = () => {
    ToastModule.toast("点击了了解中关村银行")
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.infoBg}>
          <View style={styles.infoItem}>
            <View style={styles.infoItemTitleBg}>
              <Image
                style={styles.infoItemImg}
                source={{ uri: IconChipai }}
              />
              <Text style={styles.infoItemTitle}>持牌机构</Text>
            </View>
            <Text style={styles.infoItemSubTitle}>全球首家专注服务</Text>
            <Text style={styles.infoItemSubTitle}>科技创新的银行</Text>
          </View>
          <View style={styles.itemLine}></View>
          <View style={styles.infoItem}>
            <View style={styles.infoItemTitleBg}>
              <Image
                style={styles.infoItemImg}
                source={{ uri: IconZichan }}
              />
              <Text style={styles.infoItemTitle}>资产规模</Text>
            </View>
            <Text style={styles.infoItemSubTitle}>资产规模已突破</Text>
            <Text style={styles.infoItemSubTitle}>600亿元</Text>
          </View>
          <View style={styles.itemLine}></View>
          <View style={styles.infoItem}>
            <View style={styles.infoItemTitleBg}>
              <Image
                style={styles.infoItemImg}
                source={{ uri: IconKehu }}
              />
              <Text style={styles.infoItemTitle}>客户信赖</Text>
            </View>
            <Text style={styles.infoItemSubTitle}>服务客户规模超过</Text>
            <Text style={styles.infoItemSubTitle}>451万户</Text>
          </View>
        </View>
        <View style={styles.btnBg}>
          <View style={styles.btn} onClick={this._moreInfoDidTapped}>
            <Text style={styles.btnText}>了解北京中关村银行</Text>
            <Image
              style={styles.btnImage}
              source={{ uri: IconArrow }}
            />
          </View>
        </View>
      </View>
    );
  }
}
